<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件绑定</title>
</head>
<body>

<!--
        节点对象绑定单击事件的步骤
        1. 获取节点对象
        2.编写事件需要执行的操作
        3.绑定

   绑定事件的形式：
    1. 前绑定事件    在标签中添加标签属性 onclick
    2.后绑定事件     通过获取节点对象的形式实现事件的绑定

-->
<div id="app">

</div>

<!--<button id="btn" onclick="addInfo()">单击添加内容</button>-->
<button id="btn">单击添加内容</button>


<script>

    function addInfo(){
        // document.getElementById("app").innerText = "hello javascript2"
        alert("hello javascript2")
    }


    // // 函数的调用
    // addInfo();

    let btn = document.getElementById("btn");

    btn.onclick = function () {
        // document.getElementById("app").innerText = "hello javascript"
        alert("hello javascript")
    }

    btn.onclick = addInfo


    // 事件监听
    // btn.addEventListener("click",function () {
    //     alert("hello javascript")
    // })
    //
    // btn.addEventListener("click",function () {
    //     // document.getElementById("app").innerText = "hello javascript2"
    //
    //     alert("hello javascript2")
    // })

</script>

</body>
</html>
